<template>
<div>
    <el-card>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>轨检数据智能算法</el-breadcrumb-item>
            <el-breadcrumb-item>轨检数据异常检测</el-breadcrumb-item>
        </el-breadcrumb>
    </el-card>
    <el-row :gutter="20" class="row2">
        <el-col :span="14">
            <el-card>
                <div id="line1" :style="{width: '600px', height: '300px'}"></div>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card>
                <div id="hm" :style="{width: '450px', height: '300px'}"></div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script>
var echarts = require("echarts")

export default {
    data() {
        return {
            anomaly_score: [],
            matrix: []
        }
    },
    mounted() {
        this.drawLine()
        this.drawheatmap()
    },
    methods: {
        drawheatmap() {
            let myChart = echarts.init(document.getElementById('hm'))

            var xData = [];
            var yData = [];
            for (var i = 0; i < 15; i++) {
                yData.push(i);
                xData.push(i);
            }
            myChart.setOption({
              title: {
                    text: '轨检数据异常分数r热力图',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                xAxis: {
                    type: 'category',
                    data: xData
                },
                yAxis: {
                    type: 'category',
                    data: yData
                },
                visualMap: {
                    min: 0,
                    max: 0.019,
                    left: 'right',
                    calculable: true,
                    realtime: false,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                series: [{
                    name: 'Gaussian',
                    type: 'heatmap',
                    data: this.matrix,
                    emphasis: {
                        itemStyle: {
                            borderColor: '#333',
                            borderWidth: 1
                        }
                    },
                    progressive: 1000,
                    animation: false
                }]
            })

        },
        async drawLine() {
            let myChart = echarts.init(document.getElementById('line1'))
            // 空图
            myChart.setOption({
                title: {
                    text: '轨检数据异常分数分布图',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: [],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: []
            })

            // showloading
            myChart.showLoading();

            const res = await this.$http.post('/getAnomaly');
            this.anomaly_score = res.data.data;
            //console.log(this.trackdd[0].length)
            const len = this.anomaly_score.length;
            var xdata = new Array(len)
            for (var i = 0; i < len; i++) {
                xdata[i] = i + 1;
            }
            // loading
            myChart.hideLoading();
            myChart.setOption({
                title: {
                    text: '轨检数据异常分数分布图',
                    subtext: '数据来自北京交大515实验室',
                    left: 'center'
                },
                legend: {
                    data: ['异常分数'],
                    left: 'right',
                    orient: 'vertical'
                },
                toolbox: {
                    left: 'left',
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    data: xdata
                },
                yAxis: {
                    type: 'value',
                    min: 0.0045
                },
                series: [{
                    name: '异常分数',
                    data: this.anomaly_score,
                    type: 'line'
                }]
            })
            let _this = this
            myChart.on('click', async function (param) {
                // console.log(param.name)
                const res = await _this.$http.post(`/getErrorMatrix?id=${param.name}`)
                _this.matrix = res.data.data
                _this.drawheatmap()
            })
          
        }
    }
}
</script>

<style>
.row2 {
    margin-top: 20px;
}
</style>
